<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>共享管理平台</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/common.css"/>
</head>
<body>
<form class="layui-form column-content-detail" onsubmit="return false" method="post" enctype="multipart/form-data" id="form" lay-filter="form">

    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
            <li>主体资质</li>
            <li>行业资质</li>
            <li>法人信息</li>
        </ul>
        <div class="layui-tab-content">
            <!-- 基本信息 -->
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">门店名称<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input">
                            <input type="hidden" name="id" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">门店分类<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <select name="sort" id="sort" lay-filter="sort" required lay-verify="required"  placeholder="请选择分类" title="请选择分类" class="layui-input" >

                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">店主电话<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="mainPhone" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">负责人电话<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="personPhone" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline" id="area-picker">
                        <label class="layui-form-label">门店地址<i class="require">*</i></label>
                        <div class="layui-input-inline" style="width: 165px">
                            <select name="address.province" class="province-selector" lay-filter="province">
                                <option value="">请选择省</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 165px">
                            <select name="address.cityarea" class="city-selector" lay-filter="cityarea">
                                <option value="">请选择市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 165px">
                            <select name="address.county" class="county-selector" lay-filter="county">
                                <option value="">请选择区</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">详细地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="address.street" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">地图坐标<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="map_posation" required lay-verify="required" autocomplete="off" class="layui-input">
                            <input type="hidden" name="address.longitude"/>
                            <input type="hidden" name="address.latitude"/>
                            <input type="hidden" name="address.id"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label">状态<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <select name="status" id="status" lay-filter="status" required lay-verify="required"  placeholder="请选择状态" title="请选择状态" class="layui-input" >
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">微信账号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="user.name" required lay-verify="required" autocomplete="off" class="layui-input">
                            <input type="hidden" name="user.id"/>
                        </div>
                    </div>

                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">门脸照片<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="file" name="face_photo" id="face_photo" accept="image/*"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item" id="face_photo_view" style="display: none">
                    <div class="layui-inline">
                        <label class="layui-form-label">门脸预览</label>
                        <div class="layui-input-inline layui-upload-list"  style="width: 515px">
                            <img class="layui-upload-img" id="face_photo_img" style="width: 100%;"  src="">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">店内照片<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="file" name="store_photo" id="store_photo" accept="image/*"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item"  id="store_photo_view" style="display: none">
                    <div class="layui-inline">
                        <label class="layui-form-label">店内预览</label>
                        <div class="layui-input-inline layui-upload-list"  style="width: 515px">
                            <img class="layui-upload-img" id="store_photo_img" style="width: 100%;" src="">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-inline" style="width: 515px">
                        <textarea name="presentation" placeholder="请输入描述" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
            <!-- 基本信息 -->

            <!-- 主体资质 -->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">证件类型<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" value="营业执照" disabled autocomplete="off" class="layui-input">
                            <input type="hidden" name="warrant[0].cardType" value="MAIN_WARRANT"/>
                            <input type="hidden" name="warrant[0].id"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">注册号<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="warrant[0].caseNumber" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">单位名称<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="warrant[0].companyName" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">注册地址<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="warrant[0].caseAddressId" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">法人代表<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="warrant[0].representativeName" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">执照时间<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <select name="warrant[0].cardTimeLimit" class="province-selector" lay-filter="province">
                                <option value="0" >长期有效</option>
                                <option value="1" >固定日期</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">资质附件<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="file" name="main_aptitude" id="main_aptitude" accept="image/*"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item"  id="main_aptitude_view" style="display: none">
                    <div class="layui-inline">
                        <label class="layui-form-label">资质附件预览</label>
                        <div class="layui-input-inline layui-upload-list"  style="width: 515px">
                            <img class="layui-upload-img" id="main_aptitude_img" style="width: 100%;" src="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 主体资质 -->

            <!-- 行业资质 -->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">证件类型<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" value="行业资质" disabled autocomplete="off" class="layui-input">
                            <input type="hidden" name="warrant[1].cardType" value="INDUSTRY_WARRANT"/>
                            <input type="hidden" name="warrant[1].id"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">证件编号<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="warrant[1].caseNumber" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">单位名称<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="warrant[1].companyName" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">许可证地址<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="warrant[1].caseAddressId" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">法定代表人<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="warrant[1].representativeName" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">营业项目</label>
                        <div class="layui-input-inline">
                            <input type="text" name="warrant[1].business" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">执照时间<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <select name="warrant[1].cardTimeLimit" class="province-selector" lay-filter="province">
                                <option value="0" >长期有效</option>
                                <option value="1" >固定日期</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">资质附件<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="file" name="industry_aptitude" id="industry_aptitude" accept="image/*"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item"  id="industry_aptitude_view" style="display: none">
                    <div class="layui-inline">
                        <label class="layui-form-label">资质附件预览</label>
                        <div class="layui-input-inline layui-upload-list"  style="width: 515px">
                            <img class="layui-upload-img" id="industry_aptitude_img" style="width: 100%;" src="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 行业资质 -->

            <!-- 法人信息 -->
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">法人名称<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="representativeName" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证号<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="text" name="representativeIdcard" required lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证正面<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="file" name="idcade_photo1" id="idcade_photo1" accept="image/*"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item"  id="idcade_photo1_view" style="display: none">
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证正面预览</label>
                        <div class="layui-input-inline layui-upload-list"  style="width: 515px">
                            <img class="layui-upload-img" id="idcade_photo1_img" style="width: 100%;" src="">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证反面<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="file" name="idcade_photo2" id="idcade_photo2" accept="image/*"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item"  id="idcade_photo2_view" style="display: none">
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证反面预览</label>
                        <div class="layui-input-inline layui-upload-list"  style="width: 515px">
                            <img class="layui-upload-img" id="idcade_photo2_img" style="width: 100%;" src="">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">手持身份证<i class="require">*</i></label>
                        <div class="layui-input-inline">
                            <input type="file" name="idcade_photo3" id="idcade_photo3" accept="image/*"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item"  id="idcade_photo3_view" style="display: none">
                    <div class="layui-inline">
                        <label class="layui-form-label">手持身份证预览</label>
                        <div class="layui-input-inline layui-upload-list"  style="width: 515px">
                            <img class="layui-upload-img" id="idcade_photo3_img" style="width: 100%;" src="">
                        </div>
                    </div>
                </div>


            </div>
            <!-- 法人信息 -->

            <div class="layui-form-item" style="position: absolute;top: 30px;right: 20px;">
                <div class="layui-col-lg6 page-wrap">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submit_btn">&nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;</button>
                </div>
            </div>

        </div>
    </div>
</form>
<script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/layui_table_extend.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/module/tool.js" type="text/javascript" charset="utf-8"></script>

<script>
    //配置插件目录
    layui.config({
        base: '/static/layui/plugins/'
        , version: '1.0'
    });
    layui.use(['form', 'jquery', 'element', 'http', 'upload', 'layarea', 'jform'], function() {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            $ = layui.jquery,
            http = layui.http,
            layarea = layui.layarea,
            upload = layui.upload,
            formSelects = layui.formSelects;

        form.render();

        $("#face_photo, #store_photo, #main_aptitude, #industry_aptitude, #idcade_photo1, #idcade_photo2, #idcade_photo3").on('change', function(e) {

            var type = $(this).attr("id");

            var reader=new FileReader();
            reader.onloadend = function(e){
                console.log( reader.result);
                $("#" + type + "_img").attr("src", reader.result)
                $("#" + type + "_view").show()
            }
            reader.readAsDataURL(e.target.files[0])
        })

        $("input[name='user.name']").focus(function(){
            var id = $("input[name='user.id']").val();
            parent.page("选择微信账号", "/admin/user/user_select.html", "user_select", w = "900px", h = "100%", false);
        })

        parent.window.userSelect = function(user){
            if(user){
                $("input[name='user.name']").val(user.name)
                $("input[name='user.id']").val(user.id)
            }
        }


        $("input[name='map_posation']").focus(function(){
            var map_posation = $("input[name='map_posation']").val();
            parent.page("选择门店坐标", "/admin/user/map.html?latlng=" + map_posation, "map_win", w = "900px", h = "100%", false);
        })

        parent.window.mapPosation = function(LatLng){
            console.info(LatLng)
            $("input[name='map_posation']").val(LatLng.lat + "," + LatLng.lng)
            $("input[name='address.longitude']").val(LatLng.lng)
            $("input[name='address.latitude']").val(LatLng.lat)
        }

        var id = "";
        if(window.location.href.split("?").length > 1){
            id = window.location.href.split("?")[1].split("=")[1];
        }

        http.post({
            url: '/page/user/edit?id=' + id,
            async: false,
            backFun: function(result){

                renderSelect(result.DROPDOWN.ACCOUNT_TYPE, "sort");
                renderSelect(result.DROPDOWN.ACCOUNT_STATUS, "status");

                if(result.data) {

                    var imgBasePath = "https://www.pandapro.cn/";
                    if (result.data.ext1) {
                        http.get({
                            url: "/file/get?id=" + result.data.ext1,
                            backFun: function (data) {
                                $("#face_photo_img").attr("src", imgBasePath + data);
                                $("#face_photo_view").show();
                                result.data.ext1 = null;
                            }
                        })
                    }

                    if (result.data.ext2) {
                        http.get({
                            url: "/file/get?id=" + result.data.ext2,
                            backFun: function (data) {
                                $("#store_photo_img").attr("src", imgBasePath + data);
                                $("#store_photo_view").show();
                                result.data.ext2 = null;
                            }
                        })
                    }

                    if (result.data.ext4) {
                        http.get({
                            url: "/file/get?id=" + result.data.ext4,
                            backFun: function (data) {
                                $("#idcade_photo1_img").attr("src", imgBasePath + data);
                                $("#idcade_photo1_view").show();
                                result.data.ext4 = null;
                            }
                        })
                    }

                    if (result.data.ext5) {
                        http.get({
                            url: "/file/get?id=" + result.data.ext5,
                            backFun: function (data) {
                                $("#idcade_photo2_img").attr("src", imgBasePath + data);
                                $("#idcade_photo2_view").show();
                                result.data.ext5 = null;
                            }
                        })
                    }

                    if (result.data.ext6) {
                        http.get({
                            url: "/file/get?id=" + result.data.ext6,
                            backFun: function (data) {
                                $("#idcade_photo3_img").attr("src", imgBasePath + data);
                                $("#idcade_photo3_view").show();
                                result.data.ext6 = null;
                            }
                        })
                    }


                    if (result.data.warrant) {
                        for (var i = 0; i < result.data.warrant.length; i++) {
                            if (result.data.warrant[i].cardType == "MAIN_WARRANT") {
                                http.get({
                                    url: "/file/get?id=" + result.data.warrant[i].ext1,
                                    backFun: function (data) {
                                        $("#main_aptitude_img").attr("src", imgBasePath + data);
                                        $("#main_aptitude_view").show();
                                    }
                                })
                            } else {
                                http.get({
                                    url: "/file/get?id=" + result.data.warrant[i].ext1,
                                    backFun: function (data) {
                                        $("#industry_aptitude_img").attr("src", imgBasePath + data);
                                        $("#industry_aptitude_view").show();
                                    }
                                })
                            }
                        }
                    }

                    result.data.map_posation = result.data.address.latitude + "," + result.data.address.longitude;
                    form.val("form", result.data);

                    $("select[name='address.province']").attr("value", result.data.address.province)
                    $("select[name='address.cityarea']").attr("value", result.data.address.cityarea)
                    $("select[name='address.county']").attr("value", result.data.address.county)
                }

                layarea.render({
                    elem: '#area-picker',
                    change: function (res) {
                        //选择结果
                        console.log(res);
                    }
                });

            }});

        function renderSelect(data, type){
            var sortOptions = [];
            for(var key in data){
                sortOptions.push("<option value='" + key + "'>" + data[key] + "</option>");
            }
            $("select[name='" + type + "']").append(sortOptions.join(""))
            form.render('select');
        }

        //监听提交
        form.on('submit(submit_btn)', function(data) {

            http.postForm({
                formId: 'form',
                url: '/page/user/save',
                backFun: function (data) {

                    parent.layui.layer.msg("操作成功！");
                    setTimeout(function () {
                        parent.layer.closeAll();
                        parent.layui.$("#search_btn").click();//单页面调试时使用
                        parent.layui.$("iframe").contents().find("#search_btn").click();//正常使用
                    },2000);
                }
            });

            return false;
        });


    });
</script>
</body>
</html>